<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-s-promotion"></i> 后台管理
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/sys-admin/product/pet' }">宠物管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加宠物</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
            <el-form-item label="状态" prop="zhuangtai">
                <el-input v-model="ruleForm.zhuangtai"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="xingbie">
                <el-input v-model="ruleForm.xingbie"></el-input>
            </el-form-item>
            <el-form-item label="出生日" prop="birth">
                <el-input v-model="ruleForm.birth"></el-input>
            </el-form-item>
            <el-form-item label="发色" prop="colour">
                <el-input v-model="ruleForm.colour"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="xingbie">
                <el-input v-model="ruleForm.xingbie"></el-input>
            </el-form-item>
            <el-form-item label="出生地" prop="chushengdi">
                <el-input v-model="ruleForm.chushengdi"></el-input>
            </el-form-item>
            <el-form-item label="疫苗" prop="yimiao">
                <el-input v-model="ruleForm.yimiao"></el-input>
            </el-form-item>
            <el-form-item label="血统书" prop="xuetong">
                <el-input v-model="ruleForm.xuetong"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="jiage">
                <el-input v-model="ruleForm.jiage"></el-input>
            </el-form-item>
            <el-form-item label="体重" prop="tizhong">
                <el-input v-model="ruleForm.tizhong"></el-input>
            </el-form-item>
            <el-form-item label="体重测试日" prop="tzceshiri">
                <el-input v-model="ruleForm.tzceshiri"></el-input>
            </el-form-item>
            <el-form-item label="性格" prop="xingge">
                <el-input v-model="ruleForm.xingge"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="warning" @click="$router.push('/sys-admin/product/pet')">返回列表</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    zhuangtai:'',
                    xingbie:'',
                    birth:'',
                    colour:'',
                    chushengdi:'',
                    yimiao:'',
                    xuetong:'',
                    jiage:'',
                    tizhong:'',
                    tzceshiri:'',
                    xingge:'',

                },
                rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
                    ],
                    zhuangtai:[],
                    xingbie: [],
                    birth: [],
                    colour: [],
                    chushengdi: [],
                    yimiao: [],
                    xuetong: [],
                    jiage: [],
                    tizhong: [],
                    tzceshiri: [],
                    xingge: []
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url= 'http://localhost:9080/pet/add-new';
                        console.log('url = '+ url);

                        let formData=this.qs.stringify(this.ruleForm)

                        console.log('formData = ' + formData);

                        let localJwt = localStorage.getItem('localJwt');
                        this.axios
                            .create({
                                'headers': {
                                    'Authorization': localJwt
                                }
                            })
                            .post(url, formData).then((response) => {
                            let jsonResult = response.data;
                            if (jsonResult.state == 20000) {
                                this.$message({
                                    message: '添加宠物成功！',
                                    type: 'success'
                                });
                                this.resetForm(formName);
                            } else {
                                this.$alert(jsonResult.message, '错误', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                    }
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
    }
</script>